<template>
	<view class="content">
		<!-- 顶部导航栏 -->
		<view class="top-bar">
			<navigator url="../userpage/userpage?id=aaa" class="top-bar-left" hover-class="none">
				<image src="../../static/images/img/four.png"></image>
			</navigator>
			<view class="top-bar-center">
				<!-- <image src="@/static/images/index/logo1.png" class="logo"></image> -->
			</view>
			<view class="top-bar-right">
				<view class="search" @tap="toSearch">
					<image src="@/static/images/index/search.png"></image>
				</view>
				<view class="add">
					<image src="@/static/images/index/add.png"></image>
				</view>
			</view>
		</view>
		<!-- 消息及好友列表 -->
		<view class="main">
			<view class="frineds">
				<view class="friend-list">
					<view class="friend-list-left">
						<text class="tip">1</text>
						<image src="@/static/images/img/one.png"></image>
					</view>
					<view class="friend-list-right">
						<view class="top">
							<view class="name">小田</view>
							<view class="time">20.20</view>
							
						</view>
						<view class="news">人海茫茫相聚便是缘分</view>
					</view>
				</view>
			</view>
				<view class="frineds">
					<view class="friend-list" v-for="(item,index) in friends" :key="item.id">
						<view class="friend-list-left">
							<text class="tip" v-if="item.tip>0">{{item.tip}}</text>
							<image :src="item.imgUrl"></image>
						</view>
						<view class="friend-list-right">
							<view class="top">
								<view class="name">{{item.name}}</view>
								<view class="time">{{changeTime(item.time)}}</view>
								
							</view>
							<view class="news">{{item.new}}</view>
						</view>
					</view>
				</view>
				
		</view>
		
	</view>
	
</template>

<script>
	import datas from '@/commons/js/datas.js'
	import myfun from '@/commons/js/myFun.js'
	export default {
		data() {
			return {
				friends:[],
			}
		},
		onLoad() {
			this.getFrinds();
		},
		methods: {
			changeTime:function(date){
				return myfun.dateTime(date);
			},
			getFrinds:function(){
				this.friends = datas.frineds();
				for(let i = 0;i<this.friends.length;i++)
				{
					this.friends[i].imgUrl = '../../static/images/img/' + this.friends[i].imgUrl;
				}
				// console.log(this.friends);
				console.log(this.friends[1].imgUrl)
			},
			//去搜索页面
			toSearch:function(){
				uni.navigateTo({
					url:'../search/search'
				});
			},
		}
	}
</script>

<style lang="scss">
	@import "../../commons/css/mycss.scss";
	.top-bar{
		background: rgba(255,255,255,0.96);
		border-bottom: 1px solid $uni-border-color;
		.top-bar-right{
			image{
				padding: 18rpx 0 0 18rpx;
				width: 52rpx;
				height: 52rpx;
			}
		}
	}
	
	.main{
		width: 100%;
		height: 100%;
		padding-bottom: $uni-spacing-col-base;
		// padding: 88rpx $uni-spacing-col-base 0;
		// padding: 0 100rpx;
		margin-top:104rpx ;
		// padding:0rpx 16rpx;
		// border: 1px solid red;
		// padding: 0 25rpx;
		box-sizing: border-box;
	}
	.friend-list{
		height: 96rpx;
		padding: 16rpx ;
		&:active{
			background-color: $uni-bg-color-hover;
		}
		.friend-list-left{
			position: relative;
			float: left;
			image{
				width: 96rpx;
				height: 96rpx;
				border-radius: $uni-border-radius-base;
				background-color: $uni-color-primary;
			}
			.tip{
				position: absolute;
				z-index: 10;
				top: -8rpx;
				left: 68rpx;
				height: 36rpx;
				padding: 0 8rpx;
				min-width: 20rpx;
				background: $uni-color-warning;
				border-radius: 18rpx;
				font-size: $uni-font-size-sm;
				color: $uni-text-color-inverse;
				line-height: 36rpx;
				text-align: center;
			}
		}
		.friend-list-right{
			position: relative;
			padding-left: 128rpx;
			.top{
				top: 50rpx;
				.name{
					float: left;
					font-size: 36rpx;
					color: $uni-text-color;
					// line-height: 50rpx;
				}
				.time{
					float: right;
					
					font-size: $uni-font-size-sm;
					color: $uni-text-color-disable;
					line-height: 50rpx;
				}
			}
			.news{
				// padding-top:50rpx;
				position: absolute;
				top:50rpx;
				font-size: $uni-font-size-base;
				color: $uni-text-color-grey;
				line-height: 40rpx;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
			}
		}
			
		
	}
</style>
